<template>
  <ContentWrap title="用户登陆日志">
    <div class="app-container">
      <Search
        ref="search"
        :schema="scheme"
        :model="queryParam"
        :is-col="false"
        layout="inline"
        :showSearch="true"
        button-position="left"
        :search-loading="loading"
        :reset-loading="loading"
        @search="handleSearch"
        @reset="handleSearch"
      />
    </div>
    <Table
      :data="logs"
      :columns="columns"
      :is-paging="true"
      row-key="Id"
      :pagination="paging"
      @change="load"
    >
      <template #failShow="e">
        <span v-if="!e.row.IsSuccess"
          >{{ e.row.FailShow == null ? e.row.ErrorCode : e.row.FailShow }}
        </span>
      </template>
      <template #IsSuccess="e">
        <span :style="{ color: e.row.IsSuccess ? '#43AF2B' : '#999' }">{{
          e.row.IsSuccess ? '成功' : '失败'
        }}</span>
      </template>
      <template #LoginTime="e">
        {{ $formatTime(e.row.LoginTime, 'yyyy-MM-dd HH:mm:ss') }}
      </template>
    </Table>
  </ContentWrap>
</template>

<script>
import * as onlineLogApi from '@/api/emp/onlineLog'
import { Table } from '@/components/Table'
import { Search } from '@/components/Search'
export default {
  components: {
    Table,
    Search
  },
  data() {
    return {
      loading: false,
      scheme: [
        {
          field: 'QueryKey',
          label: '关键字',
          component: 'Input',
          componentProps: {
            placeholder: '登陆名/登陆IP'
          }
        },
        {
          field: 'IsSuccess',
          label: '是否成功',
          component: 'Select',
          componentProps: {
            placeholder: '登陆是否成功',
            options: [
              {
                label: '全部',
                value: null
              },
              {
                label: '成功',
                value: true
              },
              {
                label: '失败',
                value: false
              }
            ]
          }
        },
        {
          field: 'LoginTime',
          label: '登陆时段',
          component: 'DatePicker',
          componentProps: {
            type: 'daterange',
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            startPlaceholder: '开始日期',
            endPlaceholder: '截止日期',
            rangeSeparator: '至',
            clearable: true
          }
        }
      ],
      logs: [],
      columns: [
        {
          field: 'LoginName',
          label: '登陆名',
          align: 'center',
          width: 150,
          sortby: 'LoginName',
          sortable: 'custom'
        },
        {
          sortby: 'LoginIp',
          field: 'LoginIp',
          label: '登陆IP',
          align: 'center',
          minWidth: 140,
          sortable: 'custom'
        },
        {
          field: 'Address',
          label: '登陆地址',
          align: 'center',
          minWidth: 100
        },
        {
          field: 'Browser',
          label: '浏览器',
          align: 'center'
        },
        {
          field: 'SysName',
          label: '系统名',
          align: 'center',
          minWidth: 150
        },
        {
          field: 'IsSuccess',
          label: '是否成功',
          align: 'center',
          slotName: 'IsSuccess',
          minWidth: 120
        },
        {
          field: 'FailShow',
          label: '失败原因',
          align: 'center',
          slotName: 'failShow',
          width: 200
        },
        {
          field: 'LoginTime',
          label: '登陆时间',
          align: 'center',
          slotName: 'LoginTime',
          minWidth: 110
        }
      ],
      paging: {
        pageSize: 20,
        total: 0,
        currentPage: 1
      },
      queryParam: {
        QueryKey: null,
        IsSuccess: null,
        Begin: null,
        End: null
      }
    }
  },
  computed: {},
  mounted() {
    this.reset()
  },
  methods: {
    handleSearch(data) {
      this.queryParam.QueryKey = data.QueryKey
      this.queryParam.IsSuccess = data.IsSuccess
      if (data.LoginTime == null || data.LoginTime.length === 0) {
        this.queryParam.Begin = null
        this.queryParam.End = null
      } else {
        this.queryParam.Begin = data.LoginTime[0]
        this.queryParam.End = data.LoginTime[1]
      }
      this.load()
    },
    async load(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'Id',
          IsDesc: true
        }
        this.paging.currentPage = 1
      }
      const res = await onlineLogApi.query(this.queryParam, curPaging)
      if (res.List) {
        this.logs = res.List
      } else {
        this.logs = []
      }
      this.paging.total = res.Count
    },
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.IsSuccess = null
      this.queryParam.LoginTime = null
      this.queryParam.Begin = null
      this.queryParam.End = null
      this.load()
    }
  }
}
</script>
